<template>
	<view>
		<!-- 购物车主结构  -->
		<view v-for="(item, index) in printList" :key="index">
			<view class="gui-printList gui-bg-white">
				<view style="height:25rpx;"></view>
				<view class="gui-printList-goods gui-flex gui-rows gui-nowrap gui-space-between">
					<view class="gui-printList-goods-checkbtn">
						<gui-radio :checked="item.checked" 
						@change="itemChange" checkedColor="#FF0036" 
						:parameter="[index]"></gui-radio>
					</view>
					<image v-if="item.type=='image'" :src="item.img" mode="widthFix"
					class="gui-printList-goods-image"></image>
					<image v-if="item.type=='file'" src="../../static/file.png" mode="widthFix"
					class="gui-printList-goods-image"></image>
					<view class="gui-printList-goods-body">
						<text class="gui-printList-goods-title gui-text gui-primary-color gui-block-text gui-ellipsis">{{item.name}}</text>
						<view class="gui-flex gui-rows gui-space-between">
							<view class="gui-printList-goods-price gui-block-text gui-text-right"></view>
							<view class="gui-printList-goods-number">
								<gui-step-box :disabled="true" :index="index" :datas="[index+'']" 
								:value="item.count" :maxNum="100" :minNum="1" @change="numberChange"></gui-step-box>
							</view>
						</view>
						<text class="gui-printList-remove gui-block-text gui-icons gui-color-gray" 
						@tap="removeGoods" :id="'removeIndex_' + index">&#xe62a; 删除</text>
					</view>
				</view>
			</view>
			<view class="gui-common-line"></view>
		</view>
	
		<gui-action-sheet ref="guiactionsheet" @selected="selected" 
			title="添加文件" :items="actionSheetItems"></gui-action-sheet>
		<!-- 购物车底部 -->
		<view style="height:120rpx;"></view>
		<view class="gui-printList-footer gui-bg-gray  gui-border-box">
			<view hover-class="gui-tap" @tap="open()" id="fileAdd">
				<text class="gui-text-center gui-block-text  logoff gui-primary-color  gui-bg-white">添加文件</text>
				<text v-if="totalFileNum>0" class="gui-text-center gui-block-text  gui-color-gray gui-text-small">当前含有doc,pdf,execl等文档,在线客服会统计页面后，更新订单页数</text>
			</view>
			<view style="padding-left: 30rpx;">
				<view class="gui-flex gui-rows gui-space-between gui-align-items-center  gui-border-t">
					<view class="gui-printList-count gui-flex gui-rows gui-nowrap">
						<text style="font-size:24rpx;margin-right:20rpx;" class="gui-color-red" v-if="totalImgNum>0">
						图片：{{totalImgNum}} 页</text>
						<text style="font-size:24rpx;" class="gui-color-red" v-if="totalFileNum>0">文档：{{totalFileNum}} 份</text>
					</view>
					<text v-if="isNextFlag" class="gui-printList-checkout gui-bg-red gui-block-text gui-color-white" 
					@tap="checkout">下一步</text>
					<text v-if="!isNextFlag" class="gui-printList-checkout gui-bg-black4 gui-block-text gui-color-white">下一步</text>
				</view>
				<!-- 如果购物车处于switch页面，请删除下面的组件 -->
				<view>
					<gui-iphone-bottom></gui-iphone-bottom>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			// 图片总数
			totalImgNum : 0,
			// 文件总数
			totalFileNum : 0,
			isNextFlag:true,
			printList :[],
			actionSheetItems : ['微信中的图片','微信中的文件','从相册中选取','拍照']
			}
	},
	onLoad : function(){
		if(uni.getStorageSync('printList')){
			this.printList = uni.getStorageSync('printList')
		}
		
		// 初始化时候计算总价，如果使用api 获取购物车项目在 api 请求完成后执行此函数
		this.countTotoal();
	},
	onShow() {
		//console.log(this.printList.length)
		// if(this.printList.length==0){
		// 	console.log(this.printList.length)
		// 	this.open()
		// }
	},
	methods:{
		//计算总计函数
		countTotoal:function(){
			let totalImg = 0;
			let totalFile = 0;
			for (let i = 0; i < this.printList.length; i++){
				if(this.printList[i].checked&&this.printList[i].type=="image"){
					totalImg += Number(this.printList[i].count);
				}
				if(this.printList[i].checked&&this.printList[i].type=="file"){
					totalFile += Number(this.printList[i].count);
				}
			}
			this.totalImgNum = totalImg;
			this.totalFileNum = totalFile;
			this.isNext();
	
		},
		numberChange:function(data){
			this.printList[data[2]].count = data[0];
			//计算总价
			this.countTotoal();
		},
		removeGoods : function(e){
			var index = e.currentTarget.id.replace('removeIndex_', '');
			var index = Number(index);
			uni.showModal({
				title: '确认提醒',
				content: '您确定要移除此文件吗？',
				success:(e)=>{
					if (e.confirm) {
						this.printList.splice(index,1);
						//计算总价
						this.countTotoal();
						//将缓存中的printList 重新赋值
						uni.setStorageSync('printList',this.printList)
					}
				}
			})
		},
		checkout:function(){
			uni.setStorageSync("printCount",this.totalImgNum+this.totalFileNum)
			uni.setStorageSync("printList",this.printList)
			uni.navigateTo({
				url:"../printStep2/printStep2"
			})
		},
		// 商品选中
		itemChange : function (e) {	
			var index = Number(e[1]);
			this.printList[index].checked = e[0];
			this.countTotoal();
		},
		//检查当前页数是否大于1
		isNext:function(){
			if(this.totalImgNum<1&&this.totalFileNum<1){
				this.isNextFlag = false;
			}else{
				this.isNextFlag = true;
			}
		},
		open : function () {
					this.$refs.guiactionsheet.open();
				},
		selected : function(index){
			switch (index) {
				case 0:
				wx.chooseMessageFile({
					type:"image",
					success:(res)=>{
						for (let i = 0; i < res.tempFiles.length; i++){
							this.printList.push({
								"name": res.tempFiles[i].name,
								"count": 1,
								"img": res.tempFiles[i].path,
								"checked" : true,
								"type":'image',
								"path":res.tempFiles[i].path
								})
						}
						this.countTotoal();
					}
				})
				break;
				case 1:
				wx.chooseMessageFile({
					type:"file",
					success:(res)=>{
						for (let i = 0; i < res.tempFiles.length; i++){
							this.printList.push({
								"name": res.tempFiles[i].name,
								"count": 1,
								"img": res.tempFiles[i].path,
								"checked" : true,
								"type":'file',
								"path":res.tempFiles[i].path
								})
						}
						this.countTotoal();
					}
				})
				break;
				case 2:
				uni.chooseMedia({
				  count: 9,
				  mediaType: ['image'],
				  sourceType: ['album'],
				  camera: 'back',
				  success:(res)=>{
				    for (let i = 0; i < res.tempFiles.length; i++){
				    	this.printList.push({
				    		"name": res.tempFiles[i].name,
				    		"count": 1,
				    		"img": res.tempFiles[i].tempFilePath,
				    		"checked" : true,
				    		"type":'image',
				    		"path":res.tempFiles[i].tempFilePath
				    		})
				    }
				    this.countTotoal();
				  }
				})
				break;
				case 3:
				uni.chooseMedia({
				  count: 9,
				  mediaType: ['image'],
				  sourceType: ['camera'],
				  camera: 'back',
				  success:(res)=>{
				    for (let i = 0; i < res.tempFiles.length; i++){
				    	this.printList.push({
				    		"name": res.tempFiles[i].name,
				    		"count": 1,
				    		"img": res.tempFiles[i].tempFilePath,
				    		"checked" : true,
				    		"type":'image',
				    		"path":res.tempFiles[i].tempFilePath
				    		})
				    }
				    this.countTotoal();
				  }
				})
				break;
			}
			console.log(this.printList.length)
		},
	}
}
</script>
<style>
.gui-printList{border-radius:8rpx; padding:20rpx 30rpx;}
.gui-printList-goods{margin:10rpx 0;}
.gui-printList-goods-checkbtn{width:60rpx;}
.gui-printList-goods-image{width:120rpx; margin-right:20rpx;}
.gui-printList-goods-body{width:400rpx; flex:1; overflow:hidden;}
.gui-printList-goods-title{line-height:50rpx;}
.gui-printList-goods-number{padding:2px 0;}
.gui-printList-remove{text-align:right; line-height:50rpx; margin-top:20rpx; font-size:24rpx;}
.gui-printList-footer{position:fixed; z-index:99; left:0; bottom:0; width:750rpx;}
.gui-printList-checkbtn{width:200rpx;}
.gui-printList-count{width:200rpx; flex:1;}
.gui-printList-checkout{width:260rpx; height:100rpx; line-height:100rpx; font-size:28rpx; text-align:center;}
.logoff{line-height:88rpx; font-size:28rpx;}
</style>